<template>
    <div>
        <ul>
        <li v-for="(item,index) in navigation" :key="index">
          <a
            :href="item.url"
            target="_blank"
          >
            <div class="pic">
              <img
                :src="item.src"
              />
            </div>
            <div class="info">
              <div class="tit-con">
                <div class="t1">{{item.t1}}</div>
                <div class="t2">
                  {{item.t2}}
                </div>
              </div>
              <div class="price-con">
                <div class="t1">{{item.money}}</div>
                <div class="t2">{{item.num}}</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
</template>

<script>

export default {
  data(){
    return{
       navigation:[],
      navList:
      [
                [
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src:"http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/1639029324627.jpg",
                        t1:'秀洲新区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'18200元/㎡',
                        num:'106人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/2.jpg",
                        t1:'国际商务区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'17450元/㎡',
                        num:'513人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/3.jpg",
                        t1:'海盐',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'19637元/㎡',
                        num:'964人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/4.jpg",
                        t1:'科技城',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'17850元/㎡',
                        num:'104人报名'
                    }
                ],
                [
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src:"http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/5.png",
                        t1:'秀洲新区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'11500元/㎡',
                        num:'1579人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/6.jpg",
                        t1:'国际商务区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'17600元/㎡',
                        num:'2339人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/7.jpg",
                        t1:'南湖新区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'20050元/㎡',
                        num:'3142人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src:  "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/8.jpg",
                        t1:'秀洲新区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'12750元/㎡',
                        num:'256人报名'
                    }
                ],
                [
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/%E5%9B%BD%E9%99%85%E5%95%86%E5%8A%A1%E5%8C%BA.jpg",
                        t1:'秀洲新区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'18200元/㎡',
                        num:'627人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/%E7%A7%91%E6%8A%80%E5%9F%8E.jpg",
                        t1:'国际商务区',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'13500元/㎡',
                        num:'791人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src:  "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/%E5%B9%B3%E6%B9%96.jpg",
                        t1:'科技城',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'17300元/㎡',
                        num:'504人报名'
                    },
                    {
                        url:'http://jx.fccs.com/newhouse/3528816/index.html',
                        src: "http://ye-1308566529.cos.ap-guangzhou.myqcloud.com/%E7%A7%80%E6%B4%B2%E6%96%B0%E5%8C%BA.jpg",
                        t1:'平湖',
                        t2:'嘉兴市秀洲区望仙路与环秀路交汇处（临时接待中心：原上湖轩环境美学馆）',
                        money:'23000元/㎡',
                        num:'202人报名'
                    }
                ]
      ]
    }
  },
  created(){
    this.cur(0)
  },
   methods:{
        cur(num){
            this.$parent.currentNum = num
           this.navigation = this.navList[num]
          //  console.log(this.navList[num])
          // console.log(this.navigation);
        }
    }
}
</script>


<style lang="less" scoped>
.el-col {
  text-align: center;
  margin-top: 20px;
  // margin-bottom: 20px;
  background-color: #f8f8f8;
  height: 60px;
  line-height: 60px;
  font-weight: 700;
}
 ul {
     display: flex;
     justify-content: space-between;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.tab-info .con-tab li {
    flex: 1;
}

li {
    list-style: none;
     width: 275px;
    height: 267px;
    border: 1px solid #eaeaea;
    border-radius: 5px;
     overflow: hidden;
    img{
        width: 100%;
        border-radius: 5px;
    }
}

.info{
    display: flex;
    width:275px;
    height: 97px;
    .tit-con{
        width: 146px;
            padding: 18px 13px;
    .t1 {
    font-size: 22px;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    color: #333;
}
.t2 {
    font-size: 14px;
    color: #919191;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
    }
    .price-con{
        flex:1;
            padding: 20px 10px 0;
            background-color: #fafafa;
           
        .t1 {
    font-size: 18px;
    font-weight: bold;
    color: #FD6300;
    padding-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.top-tab-wrap .tab-info .con-tab li .info .price-con .t2 {
    font-size: 14px;
    color: #919191;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
    }
}

.tab-info .con-tab {
    padding: 20px;
}

.tab-con .con-tab {
    display: none;
}

.tab-info .con-tab li .info {
    background-position: 0px -236px;
    height: 97px;
    width: 275px;
    border: 1px solid #eaeaea;
    border-radius: 0px 0px 5px 5px;
}

a {
    text-decoration: none;
    color: #333;
}

.tab-info .con-tab li .pic {
    width: 275px;
    height: 170px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    position: relative;
}

</style>